<template>
  <div class="cell_group">
    <div class="cell">
      <div class="title">
        {{config.attrName}}
      </div>
      <div class="input_icon">
        <input :class="{'isWrong':!noWrong}" type="text" :placeholder="'请输入'+config.attrName" v-model="config.value" @blur="changeName('blur')" @focus="changeName('focus')" :maxlength="this.config.inputMax">
        <div class="img" @click="show = true">
          <img src="@/assets/img/tips.png" alt="">
        </div>
      </div>
      <div class="van-image-preview" style="z-index: 2004;" @click="show = false" v-show="show">
        <van-swipe :width="width">
          <van-swipe-item v-for="(image, index) in config.attrValueList" :key="index">
            <img v-lazy="image" />
          </van-swipe-item>
        </van-swipe>

      </div>
      <div class="van-overlay van-image-preview__overlay" @click="show = false" v-show="show" style="z-index: 2003;"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "input_img",
  props: {
    config: {
      type: Object,
      required: true
    },
    parentIndex: Number,
    itemIndex: Number
  },
  data() {
    return {
      noWrong: true,
      show: false,
      images: [],
      width:0,
    };
  },
  created() {
     this.width = document.body.clientWidth;
    this.config.value = this.config.value ? this.config.value : "";
    if(this.config.value){
      this.$emit("changeValue", this.parentIndex, this.itemIndex, this.config);
    }
  },
  watch: {
    //汉字和特殊符号不用再删除，2019/10/17伊琳琳提出同车牌号
    // config(n) {
    //   if(n.value){
    //     n.value=n.value.replace(/[\W]/g,'');
    //   }
    // }
  },
  methods: {
    changeName(e) {
      if (e === "focus") {
        this.noWrong = true;
      } else {
        console.log(
          "正则--》",
          new RegExp(this.config.patternCondition).test(this.config.value)
        );
        if(this.config.patternCondition){
          this.noWrong = new RegExp(this.config.patternCondition).test(
            this.config.value
          );
        }
      }
      this.config.noWrong = this.noWrong;
      this.$emit("changeValue", this.parentIndex, this.itemIndex, this.config);

    }
  }
};
</script>
<style lang="less">
.input_icon {
  height: 100%;
  .img {
    padding-left: 0.133333rem;
    display: flex;
    align-items: center;
    img {
      width: 0.373333rem;
      height: 0.373333rem;
    }
  }
}
.van-swipe-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  img {
    width: 10rem;
  }
  span {
    font-size: 0.373333rem;
    color: #fff;
    padding: 0.533333rem;
    position: absolute;
    top: 0;
  }
}
</style>

